<template>
    <div class="m-homeremd">
        <mt-swipe :continuous="false">
            <mt-swipe-item class="asd">1asd</mt-swipe-item>
            <mt-swipe-item>2sadsad</mt-swipe-item>
            <mt-swipe-item>3asdasd</mt-swipe-item>
        </mt-swipe>
        <h2 class="remd_tl">推荐歌单</h2>
        <div class="remd_songs">
            <ul class="remd_ul">
                <router-link
                    tag="li"
                    :to="'/songList/'+ item.id + '?type=songList'"
                    class="remd_li"
                    v-for="item in list"
                    :key="item.id"
                >
                    <div class="img-box">
                        <span class="u-earp remd_lnum">{{playCount(item.playCount)}}</span>
                        <img :src="item.picUrl" :alt="item.name" />
                    </div>
                    <div class="remd_text">{{item.name}}</div>
                </router-link>
            </ul>
        </div>
    </div>
</template>
<script>
import { getrecommend } from "@/api";
import { Swipe, SwipeItem } from "mint-ui";
export default {
    name: "recommend",
    data() {
        return {
            list: [],
        };
    },
    mounted() {
        getrecommend().then((res) => {
            var data = res.data.result;
            this.list = data;
        });
    },
    methods: {
        playCount(data) {
            return (data / 10000).toFixed(1) + "万";
        },
    },
    components: {
        "mt-swipe": Swipe,
        "mt-swipe-item": SwipeItem,
    },
};
</script>

<style lang="less" scoped>
.m-homeremd {
    margin-top: 20px;
    .remd_tl {
        position: relative;
        padding-left: 9px;
        margin-bottom: 14px;
        font-size: 17px;
        height: 20px;
        line-height: 20px;
    }

    .remd_songs {
        overflow: hidden;
        padding: 0 10px;
        .remd_ul {
            margin: 0 -2px;
            display: flex;
            flex-flow: row wrap;
            .remd_li {
                flex: 0 0 33.33%;
                padding: 0 2px;
                margin-bottom: 16px;
                .img-box {
                    padding-bottom: 100%;
                    height: 0;
                    overflow: hidden;
                    position: relative;
                    .remd_lnum {
                        position: absolute;
                        right: 5px;
                        top: 2px;
                        z-index: 3;
                        padding-left: 13px;
                        color: #fff;
                        font-size: 12px;
                        background-position: 0;
                        background-repeat: no-repeat;
                        background-size: 11px 10px;
                        text-shadow: 1px 0 0 rgba(0, 0, 0, 0.15);
                    }
                    .u-earp {
                        background-image: url();
                    }
                }
                .img-box:after {
                    content: " ";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 20px;
                    z-index: 2;
                    background-image: -webkit-linear-gradient(
                        top,
                        rgba(0, 0, 0, 0.2),
                        rgba(0, 0, 0, 0)
                    );
                    background-image: linear-gradient(
                        180deg,
                        rgba(0, 0, 0, 0.2),
                        rgba(0, 0, 0, 0)
                    );
                }
                .remd_text {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    padding-top: 6px;
                    min-height: 30px;
                    line-height: 1.2;
                    font-size: 13px;
                }
            }
        }
    }
}
</style>